<template>
  <div class="PostSender">

<!--    <el-upload-->
<!--        class="avatar-uploader"-->
<!--        action="api/upload"-->
<!--        :show-file-list="false"-->
<!--        :on-success="handleAvatarSuccess"-->
<!--        :before-upload="beforeAvatarUpload">-->
<!--      <img v-if="form.faceImage" :src="this.service.baseURL+form.faceImage" class="avatar">-->
<!--      <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--      <p>设置头像</p>-->
<!--    </el-upload>-->

    <el-form>
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="form.recommend" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
            class="avatar-uploader"
            action="api/upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
                 <img v-if="form.faceImage" :src="this.service.imageURL+form.faceImage" class="avatar">

          <i class="el-icon-upload"></i>

          <div class="el-upload__text">将封面拖到此处不超过2Mb， <em>点击上传</em> </div>
<!--          <div class="el-upload__tip" slot="tip"></div>-->
        </el-upload>
      </el-form-item>
      <p style="text-align: left;">正文</p>
        <mavon-editor ref=md @imgAdd="mdImgAdd"  defaultOpen="preview"  v-model="form.content" :toolbars="toolbars" />



    </el-form>

   <div class="file-upload">


   </div>
    <div>
      <el-button v-if="isEdit" type="primary" @click="editPost">编辑</el-button>
      <el-button v-else type="primary" @click="sendPost">提交</el-button>
    </div>


  </div>
</template>

<script>
import post from "@/api/post";
import service from "@/api";
import image from "@/api/image";

export default {
  name: "UserList",
  data() {
    return {
      service,
      isEdit:false,
      imageURL:service.imageURL,
      items: [],
      query: {},
      form: {
        // "agreement": 0,
        // "createTime": "",
        // "updateTime": "",
        // "disagree": 0,
        // "id": 0,
        "title": "",
        "recommend": "",
        "content": "",
        "faceImage": "",
        "questionId": 1,
        "userId": ""
      },
      toolbars:{
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  created() {

    let id = this.$route.query.id;
    // if (id === undefined || id === '') {
    //   this.$message.error("请登录")
    //   this.$router.push({path: "/login"});
    // }

    if (id === undefined||id===null||''===id) {
      this.isEdit = false
      this.$route.meta.title = "发帖"
    }else{
      this.isEdit = true
      this.$route.meta.title = "编辑"
      this.getData();
    }



  },
  methods: {
    getData() {
      post.getPost( this.$route.query.id).then(res=>{
        this.form = res.data
      })
    },
    sendPost() {
      this.form.userId = this.$store.state.user.id
      post.addPost(this.form).then(res => {
        // if (res.status===200){
        //   this.$message.success(res.msg)
        // }else{
        //
        // }
        if (res === true) {
          this.$message.success("发帖成功！");
          this.$router.push({path:'/userSpace?id='+this.$store.state.user.id})
          // this.$router.push({path:'/postDetail?id='+this.$store.state.user.id})
        }


        this.$message.success(res.msg);

      });
    },
    editPost() {
      this.form.userId = this.$store.state.user.id

      post.editPost(this.form).then(res => {
        this.$message.success(res.msg)
        if (res.data === true) {
          this.$router.push({path:"/postDetail?id="+this.form.id})
        }
      });
    },
    handleAvatarSuccess(res, file) {
      // this.form.item.avatar = URL.createObjectURL(file.raw);
      console.log(res)
      this.form.faceImage = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    mdImgAdd(pos, $file){

      if (!this.beforeAvatarUpload($file)) {
        return
      }

      var formdata = new FormData();
      formdata.append('file', $file);
      image.uploadImage(formdata).then(res=>{
        this.$refs.md.$img2Url(pos, this.imageURL+res);
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.PostSender {
  width: 95%;
  margin: 0 auto;
}

.file-upload{
  margin-top: 30px;
  width: 300px;
  display: flex;
  border: 1px solid black;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
